<template>
	<view style="background: #FAFAFA;min-height: 100vh;padding: 20upx;">
		<view class="item" v-for="(item ,index) in list" :key="index" @click="nav(item)">
				<view class="wrap" ><span class="silk-ribbon6">{{item.answer_status==0?'未完成':'已完成'}}</span></view>
				<view class="bottom">
					<view class="time">
						创建时间：{{item.time}}
					</view>
					<view class="name">
						接力人数：{{item.people_num}} 人
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				onlineId:'',
				type:'',
				list:[]
			}
		},
		onLoad(e) {
			this.onlineId=e.onlineId
			this.type=e.type
			this.$myRuquest('home/online/online_relay', {
				online_id: this.onlineId
			}).then(res=>{
				console.log(res)
				this.list=res.data.list
			})
			
		},
		methods: {
			nav(item){
				let path='challengeing'
				if(this.type==2) path='challengeingVideo'
				uni.navigateTo({
					url: `./challengeing/${path}?onlineId=${this.onlineId}&user_id_s=${item.user_id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.item{
			padding: 20upx;
			padding-top:70upx;
			background-color: #FFFFFF;
			border-radius: 8upx;
			margin-bottom: 20upx;
			position: relative;
			.brief{
				font-size: 28upx;
				color: #333;
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				color: #999999;
				margin-top: 10upx;
			}
		}
	.wrap {
		width: 100%;
		height: 188upx;
		position: absolute;
		top: -8upx;
		left: 8upx;
		overflow: hidden;
		color: #FFFFFF;
	}
	
	.wrap:before {
		content: "";
		display: block;
		border-radius: 8upx 8upx 0upx 0upx;
		width: 40upx;
		height: 8upx;
		position: absolute;
		right: 100upx;
		background: #4D6530;
	}
	
	.wrap:after {
		content: "";
		display: block;
		border-radius: 0upx 8upx 8upx 0upx;
		width: 8upx;
		height: 40upx;
		position: absolute;
		right: 0upx;
		top: 100upx;
		background: #4D6530;
	}
	
	.silk-ribbon6 {
		display: inline-block;
		text-align: center;
		width: 200upx;
		height: 40upx;
		line-height: 40upx;
		position: absolute;
		top: 30upx;
		right: -50upx;
		z-index: 2;
		overflow: hidden;
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		border: 1upx dashed;
		box-shadow: 0 0 0 3upx $theme-color, 0upx 21upx 5upx -18upx rgba(0, 0, 0, 0.6);
		background: $theme-color;
	}
</style>
